  import * as React from 'react';
  import '../style/test.css'

  interface IProps {
      color: string,
      size?: string,
  }
  interface IState {
      count: number,
      l:number,
      t:number,
      x:number,
      y:number
  }
  export default class Test extends React.Component<IProps, IState> {
      public txt:any;
      public l:number=0;
      public t:number=0;
      public doc:HTMLDocument=document;
      public bSys=false;

      public state: Readonly<IState> = {
          count: 0,
          l:0,
          t:0,
          x:0,
          y:0
      };
      constructor(Props:IProps) {
          super(Props);

          this.fnDown=this.fnDown.bind(this);
      }

      public componentDidMount(): void {

          this.setState({
              count:2
          });

          this.txt.style.background='pink';
      }
      public fnDown(e: React.MouseEvent):void{
          this.l=e.clientX-this.txt.offsetLeft;
          this.t=e.clientY-this.txt.offsetTop;
          this.bSys=true;
          // this.doc.addEventListener('mousemove',this.fnMove.bind(this));
          // this.doc.addEventListener('mouseup',this.fnUp.bind(this));

          this.doc.onmousemove=this.fnMove.bind(this);
          this.doc.onmouseup=this.fnUp.bind(this);
          e.preventDefault();
      }
      public fnMove(e: React.MouseEvent):void{
          this.setState({
              l:e.clientX-this.l,
              t:e.clientY-this.t
          });

          // this.txt.style.left=e.clientX-this.l+'px';
          // this.txt.style.top=e.clientY-this.t+'px';
          //
          // this.txt.innerHTML=e.clientX-this.l;
          e.preventDefault();
      }
      public fnUp(e: React.MouseEvent):void{
          this.txt.style.background='yellow';

          this.doc.onmousemove=null;
          this.doc.onmouseup=null;

          // this.doc.removeEventListener('mousemove',this.fnMove.bind(this));
          // this.doc.removeEventListener('mouseup',this.fnUp.bind(this));
      }


      public render() {
          const { color, size } = this.props;
          const {count, l, t} = this.state;
          return (
              <div>
                  <div onMouseDown={this.fnDown} style={{left:l,top:t}} ref={ref=>this.txt=ref} className="ac">
                      <span>123</span>
                  </div>
                  <span>{count}</span>
                  <span>{color}</span>
                  <span>{size}</span>
              </div>
          )
      }
  }
